<template>
	<view class="container container333104">
		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
				<view class="flex flex-wrap diygw-col-0 justify-between items-center flex28-clz" @tap="navigateTo" data-type="page" data-url="/pages/customer" data-isselect="1">
					<text v-if="!userInfo.customer" class="diygw-col-0 text5-clz"> 请选择客户 </text>
					<view v-if="userInfo.customer" class="flex flex-wrap diygw-col-0 flex-direction-column justify-between items-center flex6-clz">
						<view class="flex flex-wrap diygw-col-24 items-end">
							<text class="diygw-col-0 title-clz">
								{{ userInfo.customer.title }}
							</text>
						</view>
						<view class="flex flex-wrap diygw-col-24 items-end flex22-clz">
							<text class="diygw-text-line1 diygw-col-0 address-clz">
								{{ userInfo.customer.username }}
							</text>
							<text class="diygw-col-0 text22-clz">
								{{ userInfo.customer.phone }}
							</text>
						</view>
						<text class="diygw-text-line1 diygw-col-24 text20-clz">
							{{ userInfo.customer.address }}
						</text>
					</view>
					<text class="flex icon4 diygw-col-0 icon4-clz diy-icon-right"></text>
				</view>
				<u-form-item labelAlign="justify" class="diygw-col-24" :required="true" label="开单人" prop="kaidan">
					<u-input inputAlign="right" :focus="formData.kaidanFocus" placeholder="请输入开单人" v-model="form.kaidan"></u-input>
				</u-form-item>
				<u-form-item labelAlign="justify" class="diygw-col-24" label="开单日期" :required="true" prop="kaidanDate">
					<u-input inputAlign="right" @click="formData.showKaidanDate = true" class="" placeholder="请选择" v-model="form.kaidanDate" type="select"></u-input>
					<u-calendar maxDate="2050-12-31" v-model="formData.showKaidanDate" mode="date" @change="changeFormKaidanDate"></u-calendar>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
				<text class="diygw-col-24 text-clz"> 商品清单 </text>
				<view class="flex flex-wrap diygw-col-24 flex2-clz">
					<text class="diygw-col-0 text11-clz"> # </text>
					<text class="diygw-col-0 text4-clz"> 名称 </text>
					<text class="diygw-col-0 text3-clz"> 单位 </text>
					<text class="diygw-col-0 text2-clz"> 数量 </text>
					<text class="diygw-col-0 text1-clz"> 单价 </text>
					<text class="diygw-col-0 text7-clz"> 合计 </text>
				</view>
				<view class="flex flex-wrap diygw-col-24">
					<view class="diygw-col-24" v-for="(productsItem, productsIndex) in form.products" :key="productsIndex">
						<u-form class="diygw-col-24" :model="form.products[productsIndex]" :errorType="['message', 'toast']" ref="productsRef" :rules="productsItemRules">
							<view class="flex flex-wrap diygw-col-24 items-stretch">
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex4-clz">
									<text v-if="form.products.length - 1 != productsIndex && form.products.length > 0" @tap="delProductsItem" :data-index="productsIndex" class="flex icon diygw-col-0 diy-icon-roundclose"></text>
									<text v-if="form.products.length - 1 == productsIndex" @tap="addProductsItem" :data-index="productsIndex" class="flex icon1 diygw-col-0 diy-icon-roundadd"></text>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex5-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="title">
										<u-input :focus="formData.productsItemDatas[productsIndex].titleFocus" placeholder="" v-model="productsItem.title"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex11-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="unit">
										<u-input :focus="formData.productsItemDatas[productsIndex].unitFocus" placeholder="" v-model="productsItem.unit"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex10-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="number">
										<u-input inputAlign="right" :focus="formData.productsItemDatas[productsIndex].numberFocus" placeholder="" v-model="productsItem.number" type="digit"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex9-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="price">
										<u-input inputAlign="right" :focus="formData.productsItemDatas[productsIndex].priceFocus" placeholder="" v-model="productsItem.price" type="digit"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex7-clz">
									<text class="diygw-col-0">
										{{ calcTotal(productsItem) }}
									</text>
								</view>
							</view>
						</u-form>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-end items-center flex12-clz">
					<text class="diygw-col-0 text9-clz"> 产品合计 </text>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column">
						<text class="diygw-col-0 text14-clz">
							{{ productsTotalFunction() }}
						</text>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex14-clz">
				<text class="diygw-col-24 text13-clz"> 其他费用 </text>
				<view class="flex flex-wrap diygw-col-24 flex15-clz">
					<text class="diygw-col-0 text8-clz"> # </text>
					<text class="diygw-col-0 text10-clz"> 费用项 </text>
					<text class="diygw-col-0 text12-clz"> 费用金额 </text>
				</view>
				<view class="flex flex-wrap diygw-col-24">
					<view class="diygw-col-24" v-for="(costsItem, costsIndex) in form.costs" :key="costsIndex">
						<u-form class="diygw-col-24" :model="form.costs[costsIndex]" :errorType="['message', 'toast']" ref="costsRef" :rules="costsItemRules">
							<view class="flex flex-wrap diygw-col-24 items-stretch">
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex17-clz">
									<text v-if="form.costs.length - 1 != costsIndex && form.costs.length > 0" @tap="delCostsItem" :data-index="costsIndex" class="flex icon2 diygw-col-0 diy-icon-roundclose"></text>
									<text v-if="form.costs.length - 1 == costsIndex" @tap="addCostsItem" :data-index="costsIndex" class="flex icon3 diygw-col-0 diy-icon-roundadd"></text>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex18-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="title">
										<u-input :focus="formData.costsItemDatas[costsIndex].titleFocus" placeholder="" v-model="costsItem.title"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex19-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="price">
										<u-input inputAlign="right" :focus="formData.costsItemDatas[costsIndex].priceFocus" placeholder="" v-model="costsItem.price"></u-input>
									</u-form-item>
								</view>
							</view>
						</u-form>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-end items-center flex23-clz">
					<text class="diygw-col-0 text15-clz"> 其他费用合计 </text>
					<text class="diygw-col-0 text18-clz">
						{{ costsTotalFunction() }}
					</text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex20-clz">
				<u-form-item class="diygw-col-24" label="整单优惠" prop="youhui">
					<u-input inputAlign="right" :focus="formData.youhuiFocus" placeholder="填定整单优惠金额" v-model="form.youhui" type="number"></u-input>
				</u-form-item>
				<view class="flex flex-wrap diygw-col-24 justify-end items-center flex21-clz">
					<text class="diygw-col-0 text16-clz"> 费用合计 </text>
					<text class="diygw-col-0 text19-clz">
						{{ totalFunction() }}
					</text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex26-clz">
				<u-form-item labelWidth="auto" class="diygw-col-24" label="订单备注" labelPosition="top" prop="remark">
					<u-input maxlength="200" height="60px" class="" placeholder="订单备注信息" v-model="form.remark" type="textarea"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom flex27-clz">
			<text @click="submitForm" class="diygw-col-24 green text17-clz"> 提交订单 </text>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				dataNum: 1,
				data: {
					code: 200,
					msg: 'success',
					data: {
						id: 15,
						products: '[{"title":"123","unit":"123","total":24,"number":"12","price":"2"}]',
						costs: '[{"title":"123","price":"2"}]',
						youhui: '2.000',
						total: '24.000',
						remark: '',
						status: null,
						kaidanDate: '2024-12-17 00:00:00',
						customerTitle: '客户名',
						customerUsername: '邓生',
						customerPhone: '15913132246',
						customerAddress: '联系地址联系地址',
						productsTotal: '24.000',
						costsTotal: '2.000',
						createTime: '2024-12-17 16:05:44',
						updateTime: '2024-12-17 16:05:44',
						deleteTime: null
					}
				},
				costsItemRules: {},
				formRules: {
					kaidan: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '开单人不能为空'
						}
					],
					kaidanDate: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '开单日期不能为空哟'
						}
					]
				},
				form: {
					kaidan: '',
					kaidanDate: '',
					products: [],
					costs: [],
					youhui: undefined,
					remark: ''
				},
				costsItemData: {
					titleFocus: false,
					priceFocus: false
				},
				costsItem: {
					title: '',
					price: ''
				},
				productsItem: {
					title: '',
					unit: '',
					number: undefined,
					price: undefined
				},
				productsItemData: {
					titleFocus: false,
					unitFocus: false,
					numberFocus: false,
					priceFocus: false
				},
				formData: {
					kaidanFocus: false,
					showKaidanDate: false,
					productsItemDatas: [],
					costsItemDatas: [],
					youhuiFocus: false
				},
				productsItemRules: {}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
			this.initProductsData();
			this.initCostsData();
		},
		methods: {
			async init() {
				await this.dataApi();
				await this.initResetform();
			},
			// 列表数据 API请求方法
			async dataApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/sell/orders/get';
				let http_data = {
					pageNum: this.dataNum,
					pageSize: 10,
					id: param.id || this.globalOption.id || '15'
				};
				let http_header = {};

				//这个判断意思是表示新增而不是编辑，不用请求API
				if (!this.globalOption.id) {
					this.$nextTick(() => {
						this.form.kaidan = this.userInfo.nickname;
						this.form.kaidanDate = this.$tools.getCurrentDate();
					});
					return;
				}

				let data = await this.$http.post(http_url, http_data, http_header, 'json');

				this.data = data;
				//把数据库返回来的数据转为JSON
				data.data.costs = JSON.parse(data.data.costs);
				data.data.products = JSON.parse(data.data.products);
				//重新构造客户表单显示数据
				let customer = {
					title: data.data.customerTitle,
					address: data.data.customerAddress,
					phone: data.data.customerPhone,
					username: data.data.customerUsername
				};
				data.data.kaidanDate = this.$tools.formatDateTime(data.data.kaidanDate, 'YYYY-mm-dd');

				let productsItemDatas = [];
				data.data.products.forEach((item) => {
					productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
				});
				this.formData.productsItemDatas = productsItemDatas;

				let costsItemDatas = [];
				data.data.costs.forEach((item) => {
					costsItemDatas.push(JSON.parse(JSON.stringify(this.costsItemData)));
				});
				this.formData.costsItemDatas = costsItemDatas;

				this.userInfo.customer = customer;
				this.form = data.data;
			},

			// 计算产品总金额 自定义方法
			productsTotalFunction(param) {
				let thiz = this;
				function calculateTotal(item) {
					let price = parseFloat(item.price) || 0;
					let number = parseFloat(item.number) || 0;
					return price * number;
				}
				this.form.productsTotal = this.form.products.reduce((sum, item) => sum + calculateTotal(item), 0);
				return this.form.productsTotal;
			},

			// 计算其他金额总价 自定义方法
			costsTotalFunction(param) {
				let thiz = this;
				function calculateTotal(item) {
					let price = parseFloat(item.price) || 0;
					return price;
				}
				this.form.costsTotal = this.form.costs.reduce((sum, item) => sum + calculateTotal(item), 0);
				return this.form.costsTotal;
			},

			// 总价 自定义方法
			totalFunction(param) {
				let thiz = this;
				let youhui = parseFloat(this.form.youhui) || 0;
				this.form.total = this.productsTotalFunction() + this.costsTotalFunction() - youhui;
				return this.form.total;
			},
			changeFormKaidanDate(evt) {
				this.form.kaidanDate = evt.result;
			},
			//初始化显示子表单数据条数
			initProductsData() {
				for (let i = 0; i < 1; i++) {
					this.form.products.push(JSON.parse(JSON.stringify(this.productsItem)));
					this.formData.productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
				}
				this.initProductsValid();
			},
			//子表单验证
			initProductsValid() {
				this.$nextTick(() => {
					this.$refs['productsRef']?.forEach((subform) => {
						subform.setRules(this.productsItemRules);
					});
				});
			},
			//上移子表单
			upProductsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == 0) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是第一个'
					});
					return false;
				}
				this.form.products[index] = this.form.products.splice(index - 1, 1, this.form.products[index])[0];
				this.formData.productsItemDatas[index] = this.formData.productsItemDatas.splice(index - 1, 1, this.formData.productsItemDatas[index])[0];
				this.initProductsValid();
			},
			//下移子表单
			downProductsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.form.products.length - 1) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是最后一个'
					});
					return false;
				}
				this.form.products[index] = this.form.products.splice(index + 1, 1, this.form.products[index])[0];
				this.formData.productsItemDatas[index] = this.formData.productsItemDatas.splice(index + 1, 1, this.formData.productsItemDatas[index])[0];
				this.initProductsValid();
			},
			//删除子表单
			delProductsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				this.form.products.splice(index, 1);
				this.formData.productsItemDatas.splice(index, 1);
				this.initProductsValid();
			},
			//增加子表单
			addProductsItem() {
				this.form.products.push(JSON.parse(JSON.stringify(this.productsItem)));
				this.formData.productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
				this.initProductsValid();
			},
			//验证所有的子表单
			checkProductsValid() {
				let flag = true;
				this.$refs['productsRef']?.forEach((subform) => {
					subform.validate((valid) => {
						if (!valid) {
							flag = false;
							return false;
						}
					});
				});
				return flag;
			},
			calcTotal(item) {
				let price = parseFloat(item.price) || 0;
				let number = parseFloat(item.number) || 0;
				let total = price * number;
				item.total = total;
				return total;
			},
			//初始化显示子表单数据条数
			initCostsData() {
				for (let i = 0; i < 1; i++) {
					this.form.costs.push(JSON.parse(JSON.stringify(this.costsItem)));
					this.formData.costsItemDatas.push(JSON.parse(JSON.stringify(this.costsItemData)));
				}
				this.initCostsValid();
			},
			//子表单验证
			initCostsValid() {
				this.$nextTick(() => {
					this.$refs['costsRef']?.forEach((subform) => {
						subform.setRules(this.costsItemRules);
					});
				});
			},
			//上移子表单
			upCostsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == 0) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是第一个'
					});
					return false;
				}
				this.form.costs[index] = this.form.costs.splice(index - 1, 1, this.form.costs[index])[0];
				this.formData.costsItemDatas[index] = this.formData.costsItemDatas.splice(index - 1, 1, this.formData.costsItemDatas[index])[0];
				this.initCostsValid();
			},
			//下移子表单
			downCostsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.form.costs.length - 1) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是最后一个'
					});
					return false;
				}
				this.form.costs[index] = this.form.costs.splice(index + 1, 1, this.form.costs[index])[0];
				this.formData.costsItemDatas[index] = this.formData.costsItemDatas.splice(index + 1, 1, this.formData.costsItemDatas[index])[0];
				this.initCostsValid();
			},
			//删除子表单
			delCostsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				this.form.costs.splice(index, 1);
				this.formData.costsItemDatas.splice(index, 1);
				this.initCostsValid();
			},
			//增加子表单
			addCostsItem() {
				this.form.costs.push(JSON.parse(JSON.stringify(this.costsItem)));
				this.formData.costsItemDatas.push(JSON.parse(JSON.stringify(this.costsItemData)));
				this.initCostsValid();
			},
			//验证所有的子表单
			checkCostsValid() {
				let flag = true;
				this.$refs['costsRef']?.forEach((subform) => {
					subform.validate((valid) => {
						if (!valid) {
							flag = false;
							return false;
						}
					});
				});
				return flag;
			},
			initResetform() {
				this.initform = JSON.stringify(this.form);
				//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
				//this.form = this.$tools.changeRowToForm(row,this.form)
			},
			resetForm() {
				this.form = JSON.parse(this.initform);
			},

			async submitForm(e) {
				this.$refs.formRef?.setRules(this.formRules);

				this.initProductsValid();
				this.initCostsValid();
				this.$nextTick(async () => {
					let productsvalid = await this.checkProductsValid();
					let costsvalid = await this.checkCostsValid();
					let valid = await this.$refs.formRef.validate();
					if (valid && productsvalid && costsvalid) {
						//保存数据
						let param = this.form;
						let header = {
							'Content-Type': 'application/json'
						};
						let url = '/sell/orders/add';

						if (this.userInfo.customer) {
							param.customerTitle = this.userInfo.customer.title;
							param.customerPhone = this.userInfo.customer.phone;
							param.customerAddress = this.userInfo.customer.address;
							param.customerUsername = this.userInfo.customer.username;
						}

						if (this.form.products.length == 0) {
							this.showToast('产品不能为空');
							return;
						}

						let findProducts = this.form.products.filter((item) => {
							return !item.title;
						});
						if (findProducts.length > 0) {
							this.showToast('产品不能为空');
							return;
						}

						let res = await this.$http.post(url, param, header, 'json');
						if (res.code == 200) {
							//更新列表数据
							if (this.form.id) {
								this.showToast('更新成功');
								this.navigateTo({
									type: 'page',
									url: 'sells'
								});
							} else {
								//提示是否继续新增
								let flag = await this.showModal('是否继续新增');
								if (flag) {
									//重置表单
									this.resetForm();
								} else {
									//关闭窗口
									this.navigateTo({
										type: 'page',
										url: 'sells'
									});
								}
							}
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex28-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.text5-clz {
		flex: 1;
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.flex6-clz {
		flex: 1;
	}
	.title-clz {
		flex: 1;
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.flex22-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.address-clz {
		flex: 1;
	}
	.text22-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.text20-clz {
		margin-left: 0rpx;
		color: #989898;
		flex: 1;
		width: calc(100% - 0rpx - 0rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 0rpx;
		margin-right: 0rpx;
	}
	.icon4-clz {
		color: #989898;
	}
	.icon4 {
		font-size: 40rpx;
	}
	.flex1-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.text-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		font-size: 28rpx !important;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.flex2-clz {
		background-color: #f4f4f4;
	}
	.text11-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text4-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		flex: 1;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text3-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text2-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text1-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text7-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.flex4-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 60rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.icon {
		font-size: 40rpx;
	}
	.icon1 {
		font-size: 40rpx;
	}
	.flex5-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		flex: 1;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex11-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex10-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex9-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex7-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex12-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 0rpx;
	}
	.text9-clz {
		margin-left: 10rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text14-clz {
		color: #f30303;
		font-weight: bold;
		font-size: 28rpx !important;
		text-align: center;
		min-width: 60px;
	}
	.flex14-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.text13-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		font-size: 28rpx !important;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.flex15-clz {
		background-color: #f4f4f4;
	}
	.text8-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text10-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		flex: 1;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text12-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 160rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.flex17-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 60rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.icon2 {
		font-size: 40rpx;
	}
	.icon3 {
		font-size: 40rpx;
	}
	.flex18-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		flex: 1;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex19-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 160rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex23-clz {
		padding-top: 10rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		padding-right: 0rpx;
	}
	.text15-clz {
		margin-left: 10rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text18-clz {
		color: #f30303;
		font-weight: bold;
		font-size: 28rpx !important;
		text-align: center;
		min-width: 60px;
	}
	.flex20-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex21-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 0rpx;
	}
	.text16-clz {
		margin-left: 10rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text19-clz {
		color: #f30303;
		font-weight: bold;
		font-size: 28rpx !important;
		text-align: center;
		min-width: 60px;
	}
	.flex26-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex27-clz {
		background-color: #ffffff;
		border-bottom-left-radius: 0rpx;
		overflow: hidden;
		left: 0rpx;
		bottom: 0rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
	}
	.text17-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 120rpx;
		color: #ffffff;
		padding-left: 20rpx;
		font-size: 28rpx !important;
		padding-bottom: 16rpx;
		border-top-right-radius: 120rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		border-top-left-radius: 120rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 20rpx;
	}
	.container333104 {
		padding-bottom: 160rpx;
		background-color: #f7f7f7;
	}
</style>
